<template>
  <div class="link">
    <div class="t-container">
      <div class="link-div-title">
        有朋自远方来。
        <button @click="click">
          <i class="iconfont icon-add"></i>申请友链
        </button>
      </div>
      <div class="user">
        <div class="container">
          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m1.jpg" />
                <h3>Design</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m2.jpg" />
                <h3>Code</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m3.jpg" />
                <h3>Launch</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m4.jpg" />
                <h3>Launch</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m1.jpg" />
                <h3>Design</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m2.jpg" />
                <h3>Code</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m3.jpg" />
                <h3>Launch</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="face face1">
              <div class="content">
                <img src="~/assets/img/m3.jpg" />
                <h3>Launch</h3>
              </div>
            </div>
            <div class="face face2">
              <div class="content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                <a href="#">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.link{
  padding-top: 100px;
  padding-bottom: 60px;
  .t-container{
    background-color: #fff;
    border-radius: 8px;
    padding-top: 40px;
    padding-bottom: 20px;
  }
}
.link-div-title {
  padding: 20px;
  font-size: 12px;
  border-bottom: 1px solid #eee;
  button {
    float: right;
    padding: 4px 10px;
    border: 1px solid #eee;
    margin-top: -4px;
    background-color: transparent;
    color: #737088;
  }
}
</style>